<template>
  <view class="container">
    <block v-if="isload">
      <view class="content">
        <!-- #ifdef MP-WEIXIN -->
        <button
          class="info-item avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <view class="t1">头像</view>
          <view class="avatar-box">
            <image
              :src="userinfo.headimg || defaultAvatar"
              style="width: 88rpx; height: 88rpx"
              @tap="uploadHeadimg"
            />
            <image class="t3" src="/static/img/arrowright.png" />
          </view>
        </button>
        <!-- #endif -->

        <!-- 其他平台使用普通 view -->
        <!-- #ifndef MP-WEIXIN -->
        <view class="info-item">
          <view class="t1">头像</view>
          <view class="avatar-box">
            <image
              :src="userinfo.headimg || defaultAvatar"
              style="width: 88rpx; height: 88rpx"
              @tap="uploadHeadimg"
            />
            <image class="t3" src="/static/img/arrowright.png" />
          </view>
        </view>
        <!-- #endif -->
        <view class="info-item" @tap="goto" data-url="setnickname">
          <view class="t1">昵称</view>
          <view class="t2">{{ userinfo.nickname }}</view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view
          class="info-item"
          style="height: 136rpx; line-height: 136rpx"
          v-if="opt.type == 1"
        >
          <view class="t1" style="flex: 1">背景图</view>
          <image
            :src="userinfo.note_background_img"
            style="width: 88rpx; height: 88rpx"
            @tap="uploadnBgimg"
          />
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view class="info-item" @tap="goto" data-url="add_desc">
          <view class="t1">描述</view>
          <view class="t2">{{ userinfo.description }}</view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
      </view>
      <view class="content">
        <view
          class="info-item"
          @tap="goto"
          data-url="setrealname"
          v-if="opt.type != 1"
        >
          <view class="t1">姓名</view>
          <view class="t2">{{
            userinfo.realname ? userinfo.realname : ""
          }}</view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view class="info-item" @tap="goto" data-url="settel">
          <view class="t1">手机号</view>
          <view class="t2">{{ userinfo.tel }}</view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view class="info-item" @tap="goto" data-url="setsex">
          <text class="t1">性别</text>
          <text class="t2" v-if="userinfo.sex == 1">男</text>
          <text class="t2" v-else-if="userinfo.sex == 2">女</text>
          <text class="t2" v-else>未知</text>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <!-- v-if="userinfo.pid == 0 || userinfo.pid_"  -->
        <view
          v-if="opt.type != 1 && (userinfo.pid == 0 || yqtel)"
          class="info-item"
          @tap="goto"
          :data-url="'setyqtel?tel=' + yqtel"
        >
          <view class="t1">邀请人手机号</view>
          <view class="t2">{{ yqtel }}</view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view
          class="info-item"
          @tap="goto"
          data-url="setbirthday"
          v-if="opt.type == 1"
        >
          <text class="t1">生日</text>
          <text class="t2">{{ userinfo.birthday }}</text>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
        <view
          class="info-item"
          @tap="goto"
          data-url="add_city"
          v-if="opt.type == 1"
        >
          <text class="t1">城市</text>
          <text class="t2">{{ userinfo.city }}</text>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
      </view>

      <!-- <view class="content">
			<view class="info-item" @tap="goto" data-url="setweixin">
				<view class="t1">微信号</view>
				<view class="t2">{{userinfo.weixin}}</view>
				<image class="t3" src="/static/img/arrowright.png"/>
			</view>
			<view class="info-item" @tap="goto" data-url="setaliaccount">
				<view class="t1">支付宝账号</view>
				<view class="t2">{{userinfo.aliaccount}}</view>
				<image class="t3" src="/static/img/arrowright.png"/>
			</view>
			<view class="info-item" @tap="goto" data-url="setbankinfo">
				<text class="t1">银行卡</text>
				<text class="t2">{{userinfo.bankname ? '已设置' : ''}}</text>
				<image class="t3" src="/static/img/arrowright.png"/>
			</view>
		</view> -->

      <view v-if="otherdata" class="content">
        <block v-for="(item, index) in otherdata">
          <block v-if="item.key != 'upload_file'">
            <view
              class="info-item"
              @tap="goto"
              :data-url="'setother?index=' + index"
            >
              <view class="t1">{{ item.val1 }}</view>
              <view
                v-if="item.key != 'upload' && item.key != 'upload_file'"
                class="t2"
                >{{ item.content }}
              </view>
              <view
                v-if="item.key == 'upload'"
                class="t2"
                style="height: 90rpx"
              >
                <image
                  v-if="item.content"
                  :src="item.content"
                  style="height: 70rpx; margin-top: 10rpx"
                  mode="heightFix"
                  @tap.stop="previewImage"
                  :data-url="item.content"
                ></image>
              </view>
              <image class="t3" src="/static/img/arrowright.png" />
            </view>
          </block>
          <block v-else>
            <!-- #ifdef !H5 && !MP-WEIXIN -->
            <view class="info-item">
              <view class="t1">{{ item.val1 }}</view>
              <view
                v
                class="t2"
                style="
                  overflow: hidden;
                  white-space: pre-wrap;
                  word-wrap: break-word;
                  color: #4786bc;
                "
              >
                {{ item.content }}
              </view>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 || MP-WEIXIN -->
            <view
              class="info-item"
              @tap="goto"
              :data-url="'setother?index=' + index"
            >
              <view class="t1">{{ item.val1 }}</view>
              <view
                @tap.stop="download"
                :data-file="item.content"
                class="t2"
                style="
                  overflow: hidden;
                  white-space: pre-wrap;
                  word-wrap: break-word;
                  color: #4786bc;
                "
              >
                {{ item.content }}
              </view>
              <image class="t3" src="/static/img/arrowright.png" />
            </view>
            <!-- #endif -->
          </block>
        </block>
      </view>

      <!-- <view class="content">
			<view class="info-item" @tap="goto" data-url="/pages/address/address">
				<view class="t1">收货地址</view>
				<view class="t2"></view>
				<image class="t3" src="/static/img/arrowright.png"/>
			</view>
		</view> -->
      <view class="content" v-if="userinfo.haspwd == 1">
        <view class="info-item" @tap="goto" data-url="/pagesExt/my/setpwd">
          <view class="t1">修改密码</view>
          <view class="t2"></view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
      </view>
      <!--<view class="content">
			<view class="info-item" @tap="goto" data-url="/pages/index/login">
				<view class="t1">切换账号</view>
				<view class="t2"></view>
				<image class="t3" src="/static/img/arrowright.png"/>
			</view>
		</view>-->
      <view class="content btn-subscribe" @tap="BtnSub" v-if="showBtn">
        开启管理订阅通知
      </view>
      <view class="content" v-if="opt.type != 1">
        <view class="info-item" @tap="logout">
          <view class="t1">退出登录</view>
          <view class="t2"></view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
      </view>
      <!-- #ifdef APP-PLUS -->
      <view class="content">
        <view class="info-item" @tap="delaccount">
          <view class="t1">注销账号</view>
          <view class="t2"></view>
          <image class="t3" src="/static/img/arrowright.png" />
        </view>
      </view>
      <!-- #endif -->
    </block>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      userinfo: {},

      otherdata: "",

      yqtel: "",
      showBtn: false,
      datalist: [],

      defaultAvatar: "",
    };
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.getdata();
    this.getTmplIds();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getTmplIds: function (e) {
      var that = this;
      that.loading = true;
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 3,
        },
        function (res) {
          that.loading = false;
          if (res.res.length > 0) {
            that.datalist = res.res;
            that.showBtn = true;
          }
        }
      );
    },
    BtnSub() {
      var tmplIds = this.datalist;

      wx.requestSubscribeMessage({
        tmplIds: tmplIds,
        complete(res, err) {},
      });
    },
    getdata: function () {
      var that = this;
      that.loading = true;
      // app.get('My/set', {}, function (data) {
      // 	that.loading = false;
      // 	that.userinfo = data.userinfo;
      // 		if(data.otherdata){
      // 				that.otherdata = data.otherdata;
      // 		}
      // 	that.loaded();
      // });

      app.get("My/usercenter", {}, function (data) {
        that.loading = false;
        that.userinfo = data.memberinfo;

        if (data.memberinfo.pid_info && data.memberinfo.pid_info.tel) {
          that.yqtel = data.memberinfo.pid_info.tel;
        }
        if (data.otherdata) {
          that.otherdata = data.otherdata;
        }
        that.loaded();
      });
    },
    uploadHeadimg: function () {
      var that = this;
      app.chooseImage(function (urls) {
        var headimg = urls[0];
        that.userinfo.headimg = headimg;
        app.post("My/setfield", {
          headimg: headimg,
        });
		uni.setStorageSync("headChange",1)
      }, 1);
    },
    // 微信小程序获取头像
    onChooseAvatar(e) {
      console.log("获取到头像信息", e.detail);
      // #ifdef MP-WEIXIN
      const tempAvatarUrl = e.detail.avatarUrl; // 微信返回的临时路径
      this.uploadWxAvatar(tempAvatarUrl); // 直接上传
	   uni.setStorageSync("headChange",1)
      // #endif
    },

    // 专用微信头像上传方法
    uploadWxAvatar(tempFilePath) {
      const that = this;
      uni.uploadFile({
        url:
          app.globalData.baseurl +
          "Imageupload/uploadImg/aid/" +
          app.globalData.aid +
          "/platform/" +
          app.globalData.platform +
          "/session_id/" +
          app.globalData.session_id,
        filePath: tempFilePath, // 微信临时路径
        name: "file",
        success: function (res) {
          const data =
            typeof res.data === "string" ? JSON.parse(res.data) : res.data;
          if (data.status == 1) {
            that.userinfo.headimg = data.url;
            app.post("My/setfield", { headimg: data.url });
          } else {
            app.error(data.msg);
          }
        },
      });
    },
    uploadnBgimg: function () {
      var that = this;
      app.chooseImage(function (urls) {
        var note_background_img = urls[0];
        that.userinfo.note_background_img = note_background_img;
        app.post("My/setfield", {
          note_background_img: note_background_img,
        });
      }, 1);
    },

    delaccount: function () {
      app.confirm(
        "注销账号后该账号下的所有数据都将删除并且无法恢复，确定要注销吗？",
        function () {
          app.showLoading("注销中");
          app.get("My/delaccount", {}, function (data) {
            app.showLoading(false);
            if (data.status == 1) {
              app.alert(data.msg, function () {
                app.goto("/pages/index/index");
              });
            } else {
              app.alert(data.msg);
            }
          });
        }
      );
    },
    logout: function () {
      var that = this;
      that.loading = true;
      // app.globalData.mid = 0
      uni.setStorageSync("mid", 0);
      console.log("用户id清0", app.globalData.mid);
      app.get("Index/logout", {}, function (data) {
        app.showLoading(false);
        if (data.status == 0) {
          app.alert(data.msg);
        }
      });
    },
    download: function (e) {
      var that = this;
      var file = e.currentTarget.dataset.file;
      // #ifdef H5
      window.location.href = file;
      // #endif

      // #ifdef MP-WEIXIN
      uni.downloadFile({
        url: file,
        success: (res) => {
          var filePath = res.tempFilePath;
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: function (res) {
                console.log("打开文档成功");
              },
            });
          }
        },
      });
      // #endif
    },
  },
};
</script>
<style>
.content {
  width: 94%;
  margin: 20rpx 3%;
  background: #fff;
  border-radius: 5px;
  padding: 0 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  padding: 0 3%;
  border-bottom: 1px #f3f3f3 solid;
}

.info-item:last-child {
  border: none;
}

.info-item .t1 {
  /* width: 200rpx; */
  color: #8b8b8b;
  font-weight: bold;
  height: 96rpx;
  line-height: 96rpx;
}

.info-item .t2 {
  color: #444444;
  text-align: right;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.info-item .t3 {
  width: 26rpx;
  height: 26rpx;
  margin-left: 20rpx;
}
.avatar-box {
  display: flex;
  align-items: center;
}
.avatar-box .t3 {
  width: 26rpx;
  height: 26rpx;
  margin-left: 20rpx;
}

.btn-subscribe {
  background: #ba1f25;
  border-radius: 8px;
  position: relative;
  margin: 11px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>
